<template>
  <u-tabbar
    :value="value"
    @change="changeItem($event, index)"
    :fixed="fixed"
    :border="border"
    :zIndex="zIndex"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :placeholder="placeholder"
    :safeAreaInsetBottom="safeAreaInsetBottom"
  >
    <u-tabbar-item
      v-for="(item, index) in tabbarItem"
      :key="index"
      :name="item.name"
      :text="item.text"
      :icon="item.icon"
      :badge="item.badge"
      :badgeStyle="item.badgeStyle"
      :dot="item.dot"
      @click="clickItem($event, index)"
    ></u-tabbar-item>
  </u-tabbar>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0
    },
    activeColor: {
      type: [String],
      default: '#1989fa'
    },
    inactiveColor: {
      type: [String],
      default: '#7d7e80'
    },
    fixed: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: Boolean,
      default: true,
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: [String, Number],
      default: 1
    },
    tabbarItem: {
      type: Array,
      default: () => [],
      validator: e => {
        e.forEach((item, index) => {
          if (!item.hasOwnProperty('text')) {
            console.error(`tabbar-item 字段第${index + 1} 条数据缺少必要字段 text`)
            return false
          } else {
            if (item.text === '') {
              console.error(`tabbar-item 字段第${index + 1} 条数据 text字段不能为空`)
              return false
            }
          }
        })
        return true
      }
    }
  },
  methods: {
    changeItem(e, index) {
      // item 对象有 name 那么返回的就是name  如果没有的话返回的就是index 这里需要判断一下
      const result = {
        index: index,
        name: e,
        item: this.tabbarItem[index]
      }
      this.$emit('change', result)
    },
    clickItem(e,index) {
      const result = {
        index: index,
        name: e,
        item: this.tabbarItem[index]
      }
      this.$emit('click', result)
    }
  }
}
</script>

<style scoped lang="scss">
  
</style>
